import {Form, Row, Col, Space, Button} from 'antd'
import React, {useEffect, useState} from 'react'
import AdvancedModal from '@/components/Modal/AdvancedModal'
import {FormInput} from '@/components/SearchForm/SearchFormItem'
import CustomTable from '@/components/Table'
import {getOutCarPage} from '@/service/storage/inAtorage'
import {getDict} from '@/service/common/dict'

const layout = {
	labelCol: {span: 8},
	wrapperCol: {span: 16},
}

const tailLayout = {
	wrapperCol: {offset: 8, span: 16},
}
function SelectCar({setIsOpen, isOpen, handleSerach, brandId}: any) {
	const [searchData, setSearchData] = useState({}) // 搜索条件
	const [tableList, setTableList] = useState<any[]>([]) // 车辆列表
	// 分页数据
	const [total, setTotal] = useState([])
	const [currentPage, setCurrentPage] = useState({current: 1})
	const [form] = Form.useForm()
	// 获取全部车辆数据
	const onAllListFun = (data: any, page: any) => {
		const param: any = {
			carStatus: 4, // 可排车
			fashionId: brandId?.plan?.modelName, // 车型
			companyId: brandId?.order?.companyId, // 所属公司
			starRating: brandId?.plan?.carStarId, // 星级
			cityId: brandId?.plan?.cityId, // 车辆没有提供这个字段,城市ID
		}
		const param1 = {...param, ...page}
		getOutCarPage({...param1, ...data})
			.then((res: any) => {
				if (res?.success) {
					setTableList(() => res.data.records)
					setTotal(res?.data?.total)
				}
			})
			.catch(() => {})
	}
	// 重置
	const onReset = () => {
		form.resetFields()
		setSearchData({})
		const data = {
			current: 1,
			size: 10,
		}
		onAllListFun({}, data)
	}
	// 搜索
	const onFinish = (values: any) => {
		setSearchData(values)
		setCurrentPage({current: 1})
		const data = {
			current: 1,
			size: 10,
		}
		onAllListFun(values, data)
	}
	// 选择车辆
	const changeCar = (info: any) => {
		handleSerach(info)
	}
	const [dict, setDict] = useState({
		star_rating: [], // 车辆星级
	})
	const columns = [
		{
			title: '车架号',
			dataIndex: 'vin',
			align: 'center',
			width: 150,
		},
		{
			title: '车牌号',
			dataIndex: 'number',
			align: 'center',
			width: 150,
		},
		{
			title: '品牌/车系/车型',
			dataIndex: 'carFullName',
			align: 'center',
			width: 200,
		},
		{
			title: '车辆状态',
			dataIndex: 'carStatus',
			align: 'center',
			width: 150,
			render: () => <span>可排车</span>,
		},
		{
			title: '星级',
			dataIndex: 'starRating',
			align: 'center',
			width: 150,
			render: (text: any) => (
				<>
					{dict?.star_rating?.map(
						(item: {dictKey: string; dictValue: any}) => {
							if (item?.dictKey === text) {
								return <span>{item?.dictValue}</span>
							}
							return ''
						},
					)}
				</>
			),
		},
		{
			title: '所属公司',
			dataIndex: 'companyName',
			align: 'center',
			width: 150,
		},
		{
			title: '城市',
			dataIndex: 'cityName',
			align: 'center',
			width: 150,
		},
		{
			title: '车辆所在仓库',
			dataIndex: 'warehouseName',
			align: 'center',
			width: 150,
		},
		{
			title: '操作',
			dataIndex: '',
			align: 'center',
			width: 100,
			render: (record: any) => (
				<Button
					size="small"
					type="link"
					onClick={() => {
						changeCar(record)
					}}>
					选择
				</Button>
			),
		},
	]

	useEffect(() => {
		getDict(
			{
				dictKeys: ['star_rating'],
			},
			(res: any) => {
				setDict(res)
			},
		)
		// onCarTypeListFun()
	}, [])
	useEffect(() => {
		const data = {
			current: 1,
			size: 10,
		}
		if (brandId) {
			onAllListFun({}, data)
		}
	}, [brandId])
	useEffect(() => {
		if (isOpen) {
			form.resetFields()
			setSearchData({})
			const data = {
				current: 1,
				size: 10,
			}
			onAllListFun({}, data)
		}
	}, [isOpen])

	return (
		<AdvancedModal
			title="选择绑定车辆"
			setIsOpen={setIsOpen}
			isOpen={isOpen}
			width={1200}
			footer={null}>
			<Form form={form} onFinish={onFinish} {...layout}>
				<Row gutter={24}>
					<Col span={8}>
						<FormInput
							name="vin"
							label="车架号"
							placeholder="请输入车架号"
						/>
					</Col>
					<Col span={8}>
						<FormInput
							name="number"
							label="车牌号"
							placeholder="请输入车牌号"
						/>
					</Col>
					<Col span={8}>
						<Form.Item {...tailLayout}>
							<Space>
								<Button type="primary" htmlType="submit">
									查询
								</Button>
								<Button onClick={onReset}>重置</Button>
							</Space>
						</Form.Item>
					</Col>
				</Row>
			</Form>
			<CustomTable
				type="radio"
				pagination
				total={total}
				params={currentPage}
				columns={columns}
				dataSource={tableList}
				callback={(pagination: any) => {
					// setParams(pagination);
					onAllListFun(searchData, pagination)
					const data = {
						current: pagination?.current,
					}
					setCurrentPage(data)
				}}
			/>
		</AdvancedModal>
	)
}

export default SelectCar
